<template>
	<view class="car_info">
		<up-form :model="info" labelWidth="90px">
			<up-cell-group>
				<up-cell title="车牌号" :value="info.licensePlateNumber"></up-cell>


				<up-cell title="车辆类型" :value="jsonstrToObj(info.carType)" isLink
					@click="openOrCancelPicker('carType')"></up-cell>
				<up-picker :show="selectObj.carType" @confirm="(e) => pickerChange(e, 'carType')"
					:columns="[carTypeList]" keyName='name' @cancel="openOrCancelPicker('carType')"></up-picker>

				<up-cell title="车牌颜色" :value="jsonstrToObj(info.carColor)" isLink
					@click="openOrCancelPicker('carColor')"></up-cell>
				<up-picker :show="selectObj.carColor" @confirm="(e) => pickerChange(e, 'carColor')"
					:columns="[carColorList]" keyName='name' @cancel="openOrCancelPicker('carColor')"></up-picker>

				<up-cell title="车辆能源" :value="jsonstrToObj(info.carEnergyType)" isLink
					@click="openOrCancelPicker('carEnergyType')"></up-cell>
				<up-picker :show="selectObj.carEnergyType" @confirm="(e) => pickerChange(e, 'carEnergyType')"
					:columns="[carEnergyList]" keyName='name' @cancel="openOrCancelPicker('carEnergyType')"></up-picker>

				<up-cell title="使用性质" :value="jsonstrToObj(info.natureUsage)" isLink
					@click="openOrCancelPicker('natureUsage')"></up-cell>
				<up-picker :show="selectObj.natureUsage" @confirm="(e) => pickerChange(e, 'natureUsage')"
					:columns="[natureUsage]" keyName='name' @cancel="openOrCancelPicker('natureUsage')"></up-picker>


				<up-collapse>
					<up-collapse-item title="尺寸(长/宽/高)" name="size">
						<template #value>
							<text>{{ info.carLegth }}*{{ info.width }}*{{ info.carHigh }}mm</text>
						</template>
						<div class="u-collapse-content">
							<up-form-item label="车长" border-bottom>
								<up-input type="number" v-model="info.carLegth" border="none"></up-input>
							</up-form-item>
							<up-form-item label="车宽" border-bottom>
								<up-input type="number" v-model="info.width" border="none"></up-input>
							</up-form-item>
							<up-form-item label="车高" border-bottom>
								<up-input type="number" v-model="info.carHigh" border="none"></up-input>
							</up-form-item>
						</div>
					</up-collapse-item>
				</up-collapse>

				<up-collapse>
					<up-collapse-item title="车重" name="weight">
						<template #value>
							<text>{{ info.carWeight }}kg</text>
						</template>
						<div class="u-collapse-content">
							<up-form-item label="车重" border-bottom>
								<up-input type="number" v-model="info.carWeight" border="none"></up-input>
							</up-form-item>
						</div>
					</up-collapse-item>
				</up-collapse>

				<up-collapse>
					<up-collapse-item title="核定载重量" name="loadCapacity">
						<template #value>
							<text>{{ info.loadCapacity }}kg</text>
						</template>
						<div class="u-collapse-content">
							<up-form-item label="核定载重量" border-bottom>
								<up-input type="number" v-model="info.loadCapacity" border="none"></up-input>
							</up-form-item>
						</div>
					</up-collapse-item>
				</up-collapse>

				<up-cell title="证件管理" :value="fileStatus(info)" isLink @click="reupload"></up-cell>
			</up-cell-group>
		</up-form>
		<view style="padding-bottom: 30px;">
			<up-button type="primary" color="rgb(0,129,255)" style="border-radius: 5px;margin-top: 20px;" @click="save"
				:loading="loading" loadingText="正在修改">保存修改</up-button>
		</view>
	</view>

	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { nextTick, reactive, ref } from 'vue'
import { getCarType, getCarColor, getCarEnergy, getCarInfo, editCar } from '../../../api/car'


/* 数据 */
const uToastRef = ref(null)
const loading = ref(false)
const id = ref('')
// 车信息
const info = reactive({})
// 车辆类型
const carTypeList = reactive([])
// 车辆颜色
const carColorList = reactive([])
// 车辆能源类型
const carEnergyList = reactive([])
// 使用性质
const natureUsage = reactive([{
	code: 0,
	name: '运营'
}, {
	code: 1,
	name: '非运营'
}, {
	code: 2,
	name: '货运'
}])
const selectObj = reactive({
	// 车辆类型选择
	carType: false,
	// 车辆颜色选择
	carColor: false,
	// 车辆能源类型选择
	carEnergyType: false,
	// 车辆使用性质选择
	natureUsage: false
})


/* 方法 */
// 获取车辆信息
const getCar = async (id) => {
	let res = await getCarInfo({ id })
	if (res.success) {
		Object.assign(info, res.data)
	} else {
		uToastRef.value.show({
			position: 'top',
			message: res.message,
			type: 'error'
		})
	}
}
// 获取车辆类型，颜色，能源类型封装
const getCarTypeList = async (fn, list) => {
	let res = await fn()
	if (res.success) {
		list.push(...res.data)
	} else {
		uToastRef.value.show({
			position: "top",
			message: res.message,
			type: 'warning'
		})
	}
}
// 开启关闭对应选择框
const openOrCancelPicker = (str) => {
	selectObj[str] = !selectObj[str]
}
// 对应选择框选择
const pickerChange = (e, str) => {
	info[str] = JSON.stringify({
		text: e.value[0].name,
		code: e.value[0].code
	})
	selectObj[str] = false
}
// JSON字符串转对象
const jsonstrToObj = (str) => {
	if (str) {
		return JSON.parse(str).text
	} else {
		return ''
	}
}
// 文件上传状态
const fileStatus = (data) => {
	let {
		permitPic,
		permitBackPic,
		roadTransCertPic,
		safePic
	} = data
	return !permitPic && !permitBackPic && !roadTransCertPic && !safePic ? '未上传' : permitPic &&
		permitBackPic && roadTransCertPic && safePic ? '已上传' : '未完全上传'
}
// 保存
const save = async () => {
	uToastRef.value.show({
		message: "正在保存",
		type: 'loading',
		duration: -1
	})
	loading.value = true
	let res = await editCar(info)
	loading.value = false
	if (res.success) {
		uToastRef.value.show({
			position: 'top',
			message: '修改成功',
			type: 'success'
		})
		await getCar(info.id)
	} else {
		uToastRef.value.hide()
	}
}
const reupload = () => {
	uni.navigateTo({
		url: `/package_mine/pages/car/carFile?id=${info.id}`
	})
}
// 初始化封装
const init = async () => {
	uToastRef.value.show({
		message: "正在获取车辆信息",
		type: 'loading',
		duration: -1
	})
	await getCarTypeList(getCarType, carTypeList)
	await getCarTypeList(getCarColor, carColorList)
	await getCarTypeList(getCarEnergy, carEnergyList)
	await getCar(id.value)
	uToastRef.value.hide()
}




/* 钩子 */
onLoad(async (options) => {
	id.value = options.id
	await nextTick()
	await init()
})

</script>

<style lang="scss" scoped>
.car_info {
	min-height: calc(100vh - 44px);
	background-color: #fff;
	padding: 10px;
}
</style>
